// ------------------------------
// // edX Web Certificates: Components

// About: styling for specific UI components ranging from global to modular.

// #HEADER APP
// #BANNER
// #INTRODUCTION
// #SUPPORT
// #FOOTER


// ------------------------------
// #HEADER APP
// ------------------------------
.wrapper-header {
    @extend %divider-2;
    border-bottom-color: palette(grayscale, xx-trans);
    background: palette(grayscale, white-t);
}

.header-app {

    .logo {
        @extend %reset-link;
    }
}


// ------------------------------
// #BANNER
// ------------------------------
.wrapper-banner-user {
  background-color: palette(grayscale-cool, dark);
  border-top: 1px solid palette(grayscale-cool, x-trans);
  border-bottom: 1px solid palette(grayscale-cool, x-trans);
  color: palette(grayscale, white);
}

.banner-user {

    .message-title {
        @extend %hd-6;
        color: palette(grayscale, white);
        font-weight: font-weight(semi-bold);

        @include susy-breakpoint($bp-screen-md, $susy) {
            font-size: font-size(large); // @extend %hd-5;
        }
    }

    .message-copy {
        @extend %copy-meta;
        color: palette(grayscale, white);

        @include susy-breakpoint($bp-screen-md, $susy) {
          font-size: font-size(base);
        }
    }

    .message-actions-box {
      display: inline-block;
      border: 1px solid palette(grayscale, white);
      border-radius: $component-border-radius;
      background-color: palette(grayscale, x-light);
      padding: spacing-vertical(xx-small) spacing-horizontal(x-small);
    }

    .action {
      @extend .btn;
      border: 1px solid transparent;
      border-radius: $component-border-radius;
      padding:  spacing-vertical(x-small) spacing-horizontal(small);
      background-color: transparent;
      font-size: font-size(x-large);
      color: palette(grayscale, dark);

      .share-link {
        text-decoration: none;
        color: inherit;
      }

      .icon {
        display: block;
        height: 1em;
        width: 1em;
        margin: 0 -2px -2px 0; // center icons
        fill: currentColor;
        font-style: normal;
      }

        .action-label {
            @include margin-right(spacing-horizontal(x-small));
        }

        // CASE: icon display only
        &.icon-only {

            .action-label {
                @extend %a11y-hide;
            }
        }

        &:hover {
          background-color: palette(grayscale, white);
          color: $link-focus-color;
        }

        &.action-share-facebook:hover {
          background-color: $facebook-blue;
          color: palette(grayscale, white);
        }

        &.action-share-twitter:hover {
          background-color: $twitter-blue;
          color: palette(grayscale, white);
        }

        &.action-share-linkedin:hover {
          background-color: $linkedin-blue;
          color: palette(grayscale, white);
        }
    }
}


// ------------------------------
// #SUPPORT
// ------------------------------
.support-copy {
  @extend %copy-meta;
}

.accomplishment-metadata-title {
  @extend %hd-7;
}

.accomplishment-metadata-copy {
  @extend %copy-meta;

  .metadata-copy-list {
    @extend %list-unstyled;
    margin-bottom: spacing-vertical(small);
  }

  .emphasized {
    font-weight: font-weight(bold);
  }
}


// ------------------------------
// #FOOTER
// ------------------------------
.footer-app {
    @extend %copy-micro;
}

.footer-app-nav {

    .list {
        @extend %list-unstyled;

        .nav-item {
          display: inline-block;
          margin-right: spacing-horizontal(small);
        }
    }
}

.footer-app-related {

  .logo-openedx {
    width: 120px;
  }
}

